<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础选择器</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 80px;
      height: 50px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
  </style>
  <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      // b1 改变 id 为 one 的元素的背景色为 #0000ff
      $("#b1").click(function () {
        $("#one").css("background", "#0000ff");
      })

      // b2 改变 class 为 mini 的 所有元素 的背景色为 #ff0033
      $("#b2").click(function () {
        $(".mini").css("background", "#ff0033");
      })

      // b3 改变 标签 为 <div> 的 所有元素 的背景色为 #00ffff
      $("#b3").click(function () {
        $("div").css("background", "#00ffff");
      })

      // b4 改变 所有元素的背景色为 #00ff33
      $("#b4").click(function () {
        $("*").css("background", "#00ff33");
      })

      //b5 改变 <span> 和 id为two 和 class为mini 的元素的背景色为 #3399ff
      $("#b5").click(function () {
        $("span, #two, .mini").css("background", "#3399ff");
      })
    })
  </script>
</head>
<body>
<h1>基础选择器</h1>
<input type="button" id="b1" value="改变 id 为 one 的元素的背景色为 #0000ff"><br/><br/>
<input type="button" id="b2" value="改变 class 为 mini 的 所有元素 的背景色为 #ff0033"><br/><br/>
<input type="button" id="b3" value="改变 标签 为 <div> 的 所有元素 的背景色为 #00ffff"><br/><br/>
<input type="button" id="b4" value="改变 所有元素的背景色为 #00ff33"><br/><br/>
<input type="button" id="b5" value="改变 <span> 和 id为two 和 class为mini 的元素的背景色为 #3399ff"><br/><br/>
<hr/>
<div id="one" class="mini">div id=one class=mini</div>
<div id="two">div id=two</div>
<div id="three" class="mini">div id=three class=mini</div>
<span id="s_one" class="mini">span  id=s_one class=mini</span>
<span id="s_two">span id=s_two</span>

</body>
</html>
